<template>
    <div>
        <div class="searchinfo p-4 d-f d-ai-center d-jc-between">
            <div>
                <el-button type="primary" @click="exportExcel">导出数据</el-button>
                <el-button type="danger">批量删除</el-button>
            </div>
            <div class="d-f d-ai-center mx-4">
                <el-input class="mx-3" v-model="searchcontent.mobile" placeholder="请输入电话号码"></el-input>
                <el-input class="mx-3" v-model="searchcontent.username" placeholder="请输入您要搜索的用户名"></el-input>
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" format="yyyy-MM-dd" v-model="searchcontent.date"></el-date-picker>
                </el-col>
                <el-button class="mx-3" type="primary" @click="search">搜索</el-button>
            </div>
        </div>

        <div class="mx-3">
            <el-table :data="model" style="width: 100%"  @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column> 
                <el-table-column label="Id" prop="id"></el-table-column>
                <el-table-column label="用户名" prop="username"></el-table-column>
                <el-table-column label="电话号码" prop="mobile"></el-table-column>
                <el-table-column prop="icon" label="头像">
                    <template slot-scope="scope">
                        <img :src="scope.row.icon" alt="" style="width:80px;height:30px;border-radius:5px">
                    </template>
                </el-table-column>
                <el-table-column prop="vips" sortable label="是否会员">
                    <template slot-scope="scope">
                        <el-switch disabled  :value="scope.row.vips!==0"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="注册时间" sortable prop="addTime"></el-table-column>
                <el-table-column label="标题" prop="title"></el-table-column>
                <el-table-column label="类型" prop="types"></el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="d-f d-ai-center d-jc-end m-3">
            <el-pagination background 
            @next-click="nextpage"
            @prev-click="lastpage"
            @current-change="sizepage" layout="prev, pager, next" :total="100"></el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
    import excelexport from '@/utils/excel'
    import { mobileregular } from '@/utils/regular'
    import { Component,Vue } from 'vue-property-decorator'
    @Component({
        name: 'contentlist',
        components: {

        }
    })
    export default class extends Vue {
        public selectlist = []
        public searchcontent = {
            username:'',
            mobile:'',
            date:''
        }
        private model = [
            { id:'1',username:'高应涵',mobile:'18046829501',vips:1,addTime:'2020-05-03' },
            { id:'2',username:'高应涵',mobile:'18046829501',vips:0,addTime:'2020-05-05' },
            { id:'3',username:'高应涵',mobile:'18046829501',vips:1,addTime:'2020-05-06' },
            { id:'1',username:'高应涵',mobile:'18046829501',vips:1,addTime:'2020-05-03' },
            { id:'2',username:'高应涵',mobile:'18046829501',vips:0,addTime:'2020-05-05' },
            { id:'3',username:'高应涵',mobile:'18046829501',vips:1,addTime:'2020-05-06' },
            { id:'1',username:'高应涵',mobile:'18046829501',vips:1,addTime:'2020-05-03' },
            { id:'2',username:'高应涵',mobile:'18046829501',vips:0,addTime:'2020-05-05' },
            { id:'3',username:'高应涵',mobile:'18046829501',vips:1,addTime:'2020-05-06' },
            { id:'1',username:'高应涵',mobile:'18046829501',vips:1,addTime:'2020-05-03' }
        ]

        private exportExcel(){ //导出数据为excel表
            const header: string[] = ['用户名']
            const headertype: string[] = ['username']
            excelexport( this.selectlist,header,headertype)
        }

        private handleSelectionChange(value: any){  //选择按钮，单选还是多选
            this.selectlist = value
        }
        private search(){ //搜索事件
            if(!this.searchcontent.username || !this.searchcontent.mobile || !this.searchcontent.date){
                return this.$message.error('请输入完整信息搜索')
            }
            mobileregular(this.searchcontent.mobile)
        }

        private handleEdit(row: any){ //编辑按钮事件
            this.$router.push(`/contentedit/${row.id}`)
        }

        private handleDelete(row: any){ //删除按钮事件
            this.$confirm(`是否确认删除？`, "确认信息", {
                distinguishCancelAndClose: true,
                confirmButtonText: "确认删除",
                cancelButtonText: "放弃删除"
            })
            .then(() => {
                this.$message.success('删除成功')
            })
            .catch(() => {
                this.$message.success("取消成功");
            }); 
        }

        private nextpage(e){ //点击下一页分页
            console.log(e)
        }

        private lastpage(e){ //点击上一页分页
            console.log(e)
        }

        private sizepage(e){ //选择数字分页
            console.log(e)
        }
    }
</script>

<style>

</style>